<template>
	<view class="content-bg">
		<view class="card-box" v-for='(item,index) in arr' :key='index'>
			<view class="title">
				{{index+1}}、{{item.name}}
				<block v-if='item.type=="image"'>,{{item.field.length}}/{{item.maxNum||1}}</block>
				<block v-if='item.type=="radio"'>(单选,{{ item.isAnswer?'必填':'选填' }})</block>
				<block v-else-if='item.type=="checkbox"'>(多选,{{ item.isAnswer?'必填':'选填' }})</block>
				<block v-else-if='item.type!=="desc"'>({{ item.isAnswer?'必填':'选填' }})</block>
			</view>
			<!-- 多项填空 -->
			<view class='fill-box' v-if='item.type=="fill"'>
				<view class='fill-item' v-for='(items,indexs) in item.field' :key='indexs'>
					<input class='input' v-model='items.value' :maxlength="item.maxNum" type="text" placeholder="请输入">
				</view>	
			</view>
			<!-- 多行文本 -->
			<view class='textarea-box' v-else-if='item.type=="textarea"'>
				<textarea v-model='item.answer' :maxlength="item.maxNum||300" placeholder="请输入"></textarea>
				<view class="num-box">{{item.answer.length}}/{{item.maxNum||300}}</view>
			</view>
			<!-- 单行文本 -->
			<view class='input-box' v-else-if='item.common=="input"&&item.type!=="textarea"&&item.type!=="fill"'>
				<input class='input' v-model='item.answer' :maxlength="item.maxNum||30" type="text" placeholder="请输入">
			</view>
			<!-- 上传图片 -->
			<view class='upload-img' v-else-if='item.type=="image"'>
				<view class="upload-item" v-for='(items,indexs) in item.field' :key='indexs'>
					<view class="item">
						<image :src="items" mode="aspectFill"></image>
						<view class="delete-ico" @click='deleteImg(index,indexs)'>x</view>
					</view>
				</view>
				<view class="upload-item" @click='handleImg(item,index)' v-if='!item.field.length||item.field.length<item.maxNum'>
					<view class="item">
						<view class="upload-ico">＋上传</view>
					</view>
				</view>
			</view>
			<!-- 上传文件 -->
			<view class='upload-file' v-else-if='item.type=="file"'>
				<view class="upload-btn" @click.stop='handleFile(index)'>
				  {{ item.answer?'已上传文件：'+item.answer.split('/')[3]:'＋上传文件'}}
				</view>
				<view v-if='item.answer' class="delete-ico" @click='deleteFile(index)'>x</view>
			</view>
			<!-- 手写签名 -->
			<view @click='handleSign(index)' class='upload-sign' v-else-if='item.type=="signature"'>
				<image v-if='item.answer' :src="item.answer" mode="heightFix"></image>
				<view v-else class="sign-btn">{{device_type=='pc'?'暂不支持pc端使用！':'点击手写您的签名'}}</view>
				<view v-if='item.answer' class="delete-ico" @click.stop='deleteFile(index)'>x</view>
			</view>
			<!-- 单选/多选 -->
			<view class='select-box' v-else-if='item.type=="radio"||item.type=="checkbox"'>
				<view class='select-item' @click='handleSelect(item,index,indexs)' v-for='(items,indexs) in item.field' :key='indexs'>
					<block v-if='item.type=="radio"'>
						<image v-if='items.isSelect' src="/static/common/radio-is.png" mode="widthFix"></image>
						<image v-else src="/static/common/radio-no.png" mode="widthFix"></image>
					</block>
					<block v-else-if='item.type=="checkbox"'>
						<image v-if='items.isSelect' src="/static/common/checkbox-is.png" mode="widthFix"></image>
						<image v-else src="/static/common/checkbox-no.png" mode="widthFix"></image>
					</block>
					<view class='name'>{{ items.label }}</view>
				</view>
			</view>
			<!-- 年月日 -->
			<view class="date-box" v-else-if='item.type=="date"' @click='cur_index=index'>
				<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</view>
				</picker>
			</view>
			<!-- 时分秒 -->
			<view class="time-box" v-else-if='item.type=="time"' @click='cur_index=index,visibleTime=true'>
				<picker mode="multiSelector" :range='timeData' @change="bindTimeChange">
				  <view class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</view>
				</picker>
				<!-- <picker mode="time" start="00:00" end="24:00" @change="bindTimeChange">
				  <view class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</view>
				</picker> -->
			</view>
			<!-- 下拉框 -->
			<view class="down-box" v-else-if='item.type=="select"' @click='cur_index=index'>
				<picker mode="selector" range-key='label' :range='item.field' @change="bindSelectChange">
				  <view class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</view>
				</picker>
			</view>
			<!-- 省 -->
			<view class="date-box" v-else-if='item.type=="city_p"' @click='cur_index=index,column=1,visibleCity=true'>
				<view class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</view>
			</view>
			<!-- 省市 -->
			<view class="date-box" v-else-if='item.type=="city_pc"' @click='cur_index=index,column=2,visibleCity=true'>
				<view class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</view>
			</view>
			<!-- 省市区 -->
			<view class="date-box" v-else-if='item.type=="city_pcd"' @click='cur_index=index,column=3,visibleCity=true'>
				<view class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</view>
			</view>
			<cityPicker :column="column" :mask-close-able="true" @confirm="confirmCity" @cancel="visibleCity=false" :visible="visibleCity"/>
		</view>
		<view style='height: 140rpx'></view>
		<view class="foot-btns">
			<view class="foot-item" @click='goResult'>查看提交结果</view>
			<view class="foot-item" @click='submitForm'>确认提交问卷</view>
		</view>
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import { questionArr } from '@/network/questionArr.js'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				arr: [],//问卷数据
				cur_index: 0,//记录点击的index索引
				visibleCity: false,//是否显示城市选择器
				column: 1,//1省 2省市 3省市区
				startDate: '',//开始时间
				endDate: '',//结束时间
				timeData: [[],[],[]],//时分秒
				visibleTime: false,//是否显示时间选择器
				device_type: uni.getDeviceInfo().deviceType//设备类型，判断签名pc不可用
			}
		},
		onLoad(){
			this.arr = questionArr
			this.getDate()
		},
		onShow(){
			const sign_url = uni.getStorageSync('sign_url') || ''
			console.log('签名图片：', sign_url);
			if(sign_url&&this.cur_index&&this.arr[this.cur_index].type=='signature'){
				this.arr[this.cur_index].answer = sign_url
			}
		},
		onHide(){
			if(uni.getStorageSync('sign_url')) uni.removeStorageSync('sign_url')
		},
		methods: {
			// 查看提交结果
			goResult(){
				uni.showToast({title: '暂无此功能！', icon: 'none'})
			},
			// 提交问卷
			submitForm(){
				let info_index = 0
				const regMobile = /^1[3456789]\d{9}$/
				const regEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
				const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/
				let isTrue = this.arr.some((item,index)=>{
					if(item.isAnswer){
						info_index = index
						if(!item.answer&&item.common=='select'){
							return true
						}else if(!item.answer&&item.common=='input'&&item.type!=='fill'){
							return true
						}else if(item.answer&&(item.type=='tel'||item.type=='email'||item.type=='idcard')){
							if(!regMobile.test(item.answer)&&item.type=='tel'){
								return true
							}else if(!regEmail.test(item.answer)&&item.type=='email'){
								return true
							}else if(!regCard.test(item.answer)&&item.type=='idcard'){
								return true
							}
						}else if(item.common=='input'&&item.type=='fill'){
							let isTrue = item.field.some(items=>!items.value)
							if(isTrue) return true
						}else if(item.type=='image'&&!item.field.length){
							return true
						}else if(!item.answer&&(item.type=='file'||item.type=='signature')){
							return true
						}else if(item.type=='frequency'&&!item.answer){
							return true
						}else if(item.type=='frequency'&&item.answer){
							let isTrue = item.field.some(items=>!items.start||!items.end)
							if(isTrue) return true
						}
					}
				})
				console.log(isTrue, info_index, this.arr);
				if(isTrue){
					uni.showModal({
						title: '提示!',
						content: `请完善问题【${info_index+1}】，并检查格式是否有误`,
						showCancel: false,
					})
				}else{
					uni.showModal({
						title: '确认提交？',
						success(res) {
							if(res.confirm){
								uni.showToast({title: '提交成功！', icon: 'none'})
							}
						}
					})
				}
			},
			// 手写签名
			handleSign(index){
				if(this.device_type=='pc'){
					uni.showToast({title: '暂不支持pc端使用！', icon: 'none'})
				}else{
					this.cur_index = index
					console.log(this.cur_index,index);
					uni.navigateTo({
						url: '/pages/index/sign/sign'
					})
				}
			},
			// 获取开始/结束日期
			getDate(){
				let date = new Date()
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				let d = date.getDate()
				d = d < 10 ? '0' + d : d
				this.startDate = `${y}-${m}-${d}`
				this.endDate = `${y+1}-${m}-${d}`
				
				// 获取时分秒
				for (let i = 0; i <= 23; i++) {
					if(i<10) this.timeData[0].push('0'+i)
					else this.timeData[0].push(i)
				}
				for (let i = 0; i <= 59; i++) {
					if(i<10){
						this.timeData[1].push('0'+i)
						this.timeData[2].push('0'+i)
					}else{
						this.timeData[1].push(i)
						this.timeData[2].push(i)
					}
				}
			},
			// 改变单选/多选
			handleSelect(item,index,indexs){
				if(item.type=="radio"){
					this.arr[index].field.map(item=>{
						item.isSelect = false
					})
					this.arr[index].field[indexs].isSelect = true
				}else if(item.type=="checkbox"){
					this.arr[index].field[indexs].isSelect = !this.arr[index].field[indexs].isSelect
				}
				// 存入已选
				let str = []
				this.arr[index].field.map(item=>{
					if(item.isSelect){
						str.push(item.label)
					}
				})
				this.arr[index].answer = str.join(',')
			},
			// 选择日期
			bindDateChange(e){
				console.log(e);
				this.arr[this.cur_index].answer = e.detail.value
			},
			// 选择时间
			bindTimeChange(e){
				console.log(e);
				let str = e.detail.value
				this.arr[this.cur_index].answer = this.timeData[0][str[0]] + ':' + this.timeData[1][str[1]] + ':' + this.timeData[2][str[2]]
			},
			// 下拉框
			bindSelectChange(e){
				console.log(e);
				this.arr[this.cur_index].answer = this.arr[this.cur_index].field[e.detail.value].label
			},
			// 选择省市区
			confirmCity(e){
				console.log(e);	
				this.arr[this.cur_index].answer = e.name
				this.visibleCity = false
			},
			// 上传图片
			handleImg(item,index){
				const that = this
				uni.chooseImage({
				  count: item.maxNum? item.maxNum - item.field.length : 1,
				  sizeType: ['compressed'],
					success(res){
						console.log(res);
						res.tempFiles.map(result=>{
							that.arr[index].field.push(result.path)
						})
					}
				})
				// 压缩图片
				// uni.chooseImage({
				//   count: item.maxNum? item.maxNum - item.field.length : 1,
				//   sizeType: ['compressed'],
				// }).then(res => {
				//   console.log('上传图片', res)
				// 	const imagePromises = res.tempFiles.map(item => uploadCompressImg(item.path))
				// 	return Promise.all(imagePromises)
				// }).then(results => {
				// 	console.log('处理图片上传结果', results)
				//   results.forEach(result => {
				//     this.arr[index].field.push(result)
				//   })
				// })
			},
			// 删除图片
			deleteImg(index,indexs){
				console.log(index,indexs);
				this.arr[index].field.splice(indexs,1)
			},
			// 删除文件
			deleteFile(index){
				this.arr[index].answer = ''
			},
			// 上传文件
			handleFile(index){
				const typeArr = ['.xls','.xlsx','.pdf','.doc','.docx','.dot','.dotx']
				const that = this
				uni.chooseFile({
					count: 1,
					extension: typeArr,
					success(res) {
						console.log('res',res);
						var fileRegex = /\.(xls|xlsx|pdf|doc|docx|dot|dotx)$/i;
						if(fileRegex.test(res.tempFiles[0].name)){
							if (res.tempFiles[0].size / 1024 / 1024 > 10) {
								uni.showToast({title: '附件大小不能超过10M',icon: 'none'})
								return;
							}
							that.arr[index].answer = res.tempFiles[0].path
						}else{
							uni.showModal({
								title: '上传文件类型',
								content: '仅支持：' + typeArr.toString() + '格式',
								showCancel: false,
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	.content-bg{
		box-sizing: border-box;
		padding: 30rpx;
		width: 100%;
		min-height: 100vh;
		background-color: $bg-color;
		.card-box{
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			position: relative;
			.mark{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 10;
				box-sizing: border-box;
				padding: 5rpx 15rpx;
				border-top-right-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				font-size: 22rpx;
				color: $theme-color;
				border: 1rpx solid $theme-color;
				background-color: rgba(2,193,118,.07);
			}
			/* 顶部信息 */
			.titles{
				margin: 40rpx 0;
				text-align: center;
				font-size: 33rpx;
				letter-spacing: 3rpx;
				word-break: break-all;
				word-wrap: break-word;
			}
			.time{
				margin-top: 10rpx;
				text-align: center;
				font-size: 23rpx;
				color: $color3;
			}
			.infos{
				margin-top: 40rpx;
				font-size: 26rpx;
				color: $theme-color;
			}
			/* 题目 */
			.title{
				font-size: 28rpx;
				color: $color1;
				padding-left: 15rpx;
				border-left: 10rpx solid $theme-color;
				word-break: break-all;
				word-wrap: break-word;
			}
			/* 多项填空 */
			.fill-box{
				.fill-item{
					margin-top: 20rpx;
				}
			}
			/* 多行文本 */
			.textarea-box{
				margin-top: 20rpx;
				background-color: $bg-color;
				border: 0;
			}
			/* 单行文本 */
			.input-box{
				margin-top: 20rpx;
			}
			/* 表单提交输入框 */
			.input{
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 100%;
				height: 90rpx;
				font-size: 28rpx;
				background-color: $bg-color;
				border-radius: 15rpx;
				border: none;
			}
			/* 表单提交文本域 */
			.textarea-box{
				margin-top: 20rpx;
				position: relative;
				padding: 20rpx 20rpx 40rpx;
				border: 1rpx solid $border-color;
				border-radius: 10rpx;
				textarea{
					width: 100%;
					height: 200rpx;
					line-height: 43rpx;
					font-size: 28rpx;
					word-break: break-all;
					word-wrap: break-word;
				}
				.num-box{
					position: absolute;
					right: 4rpx;
					bottom: 4rpx;
					color: $color3;
					font-size: 22rpx;
				}
			}
			/* 上传图片 */
			.upload-img{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.upload-item{
					width: 33.33%;
					.item{
						width: 95%;
						position: relative;
						image{
							width: 200rpx;
							height: 200rpx;
							line-height: 200rpx;
							text-align: center;
							background-color: $bg-color;
							border-radius: 10rpx;
						}
						.upload-ico{
							width: 200rpx;
							height: 200rpx;
							line-height: 200rpx;
							text-align: center;
							font-size: 26rpx;
							color: $color3;
							border: 1rpx dashed $color3;
							border-radius: 10rpx;
						}
						.delete-ico{
							position: absolute;
							top: -10rpx;
							right: 0;
							z-index: 99;
							width: 32rpx;
							height: 32rpx;
							background-color: red;
							color: #fff;
							font-size: 25rpx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
			/* 上传文件 */
			.upload-file{
				margin-top: 20rpx;
				position: relative;
				.upload-btn{
					box-sizing: border-box;
					padding: 25rpx;
					width: 100%;
					text-align: center;
					border: 1rpx dashed $color3;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: $color3;
					word-break: break-all;
					word-wrap: break-word;
				}
				.delete-ico{
					position: absolute;
					top: -10rpx;
					right: 0;
					z-index: 99;
					width: 32rpx;
					height: 32rpx;
					background-color: red;
					color: #fff;
					font-size: 25rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			/* 手写签名 */
			.upload-sign{
				margin-top: 20rpx;
				width: 100%;
				height: 260rpx;
				display: flex;
				justify-content: center;
				position: relative;
				.sign-btn{
					width: 100%;
					height: 260rpx;
					line-height: 260rpx;
					text-align: center;
					border: 1rpx dashed $color3;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: $color3;
				}
				image{
					width: 100%;
					height: 650rpx;
					border-radius: 10rpx;
					transform: rotateZ(-90deg) translateX(200rpx);
					border: 1rpx dashed $color3;
				}
				.delete-ico{
					position: absolute;
					top: -10rpx;
					right: 0;
					z-index: 99;
					width: 32rpx;
					height: 32rpx;
					background-color: red;
					color: #fff;
					font-size: 25rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			/* 单选/多选 */
			.select-box{
				.select-item{
					margin-top: 25rpx;
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					.name{
						margin-left: 15rpx;
						font-size: 28rpx;
						color: $color1;
					}
				}
			}
			/* 选择按钮 */
			.date-box,.time-box,.city-box,.down-box{
				margin-top: 20rpx;
				.btn{
					box-sizing: border-box;
					padding: 0 20rpx;
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 28rpx;
					color: #000;
					background-color: $bg-color;
					border-radius: 15rpx;
				}
			}
		}
		/* 底部双按钮 */
		.foot-btns{
			box-sizing: border-box;
			padding: 0 25rpx;
			width: 100%;
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			.foot-item{
				box-sizing: border-box;
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 15rpx;
				color: #fff;
			}
			.foot-item:first-child{
				background-color: #ccc;
			}
			.foot-item:nth-child(n+2), .foot-item:last-child{
				background-color: $theme-color;
			}
			.foot-item:nth-child(n+2){
				margin-left: 20rpx;
			}
		}
	}
</style>
